import React from 'react';
import { createStyles } from 'antd-style';

/**
 * 应用错误边界
 */
export  class ProErrorBoundary extends React.PureComponent<any> {
  state = {
    hasError: false,
    error: "",
    info: "",
  }

  componentDidCatch(error: Error | null, info: React.ErrorInfo) {
    this.setState({ hasError: true, error: error?.message, info });
  }

  render() {
    if (this.state.hasError) return <ErrorRender err={this.state.error} />
    return this.props.children;
  }
}


const ErrorRender: React.FC<{ err: string }> = ({ err }) => {
  const { styles } = useStyle();
  return <div className={styles.errorBoundary}>
    <h3 style={{ textAlign: "center" }}>页面产生错误，请联系管理员!</h3>
    <h3 style={{ textAlign: "center" }}>错误信息:{err}</h3>
  </div>
}


const useStyle = createStyles(({ css }) => ({
  errorBoundary: css`
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
  `
}))
